<script>
  init({
    title: 'Reset View',
    desc: 'Reset the bootstrap table view, for example reset the table height: `$table.bootstrapTable(\'resetView\')`.',
    links: ['bootstrap-table.min.css'],
    scripts: ['bootstrap-table.min.js']
  })

</script>

<style>
    .div-table {
        width: 600px;
    }
</style>

<div id="toolbar">
    <button class="btn btn-secondary" id="button">Large and resetView</button>
    <button class="btn btn-secondary" id="button2">Small and resetView</button>
</div>
<div class="div-table">
    <table
            data-height="460"
            data-toggle="table"
            data-toolbar="#toolbar"
            data-url="json/data1.json"
            id="table">
        <thead>
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>
</div>

<script>
  var $div = $('.div-table')
  var $table = $('#table')
  var $button = $('#button')
  var $button2 = $('#button2')

  function mounted() {
    $button.click(function () {
      $div.width($div.width() + 50)
      $table.bootstrapTable('resetView')
    })
    $button2.click(function () {
      $div.width($div.width() - 50)
      $table.bootstrapTable('resetView')
    })
  }

</script>
